<template>

  <div style="width: 100%">
    <h1>服务订单</h1>
    <el-table :data="serviceOrderList" border style="width: 80%;margin-left:120px">
      <el-table-column prop="staff.staffName" label="姓名" width="100">
      </el-table-column>
      <el-table-column prop="staff.staffTel" label="电话" width="130">
      </el-table-column>
      <el-table-column prop="service.serviceName" label="服务品类" width="120">
      </el-table-column>
      <el-table-column prop="serviceOrderDate" label="时间" width="120">
      </el-table-column>
      <el-table-column prop="service.serviceWeight" label="使用规格" width="120">
      </el-table-column>
      <el-table-column prop="service.serviceFix" label="服务规格" width="120">
      </el-table-column>
      <el-table-column prop="staff.staffLevel" label="服务员等级" width="120">
      </el-table-column>
      <el-table-column prop="serviceOrderState" label="订单状态" width="100">
      </el-table-column>
      <el-table-column prop="service.servicePrice" label="价格" width="100">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            style="width:50px"
            @click="handleUpdate(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            style="width:50px"
            @click="handleDel(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
      <Pager
      :page="page"
      :limit="limit"
      :total="total"
      :panelNumber="panelNumber"
      @changePage="handleChangePage"
    />
    <br />
    <br />
    <div style="width: 80%;margin-left:120px">
      <div >
        <el-input
          placeholder="请输入姓名或者订单状态"
          v-model="inputQuery"
          style="width:300px"
        >
        </el-input>
        <br />
        <br />
        <el-button type="primary" style="width:100px" @click="handleQuery()">查询</el-button>
      </div>
    </div>
  </div>
  
</template>

<script>
import { queryServiceOrder,delServiceOrder} from "@/services/ServiceOrderService.js";
import Pager from "@/components/Pager.vue";
export default {
    components: {
        Pager
    },
    inject:['reload'],

    data() {
        return {
        limit: 3,
        panelNumber: 10,
        total: 0,
        inputQuery:"",
        serviceOrderList: []
        };
    },
    async created() {
        console.log("serviceOrderList");
        var serviceOrderQuery = this.inputQuery
        var resp = await queryServiceOrder(this.page, this.limit,serviceOrderQuery);
        this.serviceOrderList = resp.data.list;
        console.log(this.serviceOrderList);
        this.total = resp.data.total;
        console.log("+++++++++++++++++++++++++")
        console.log(resp);
    },
    computed: {
        page() {
        return +this.$route.query.page || 1;
        },
    },
    
    methods: {

      // 修改
      handleUpdate(row) {
        this.$router.push({ name: "UpdateServiceOrder", params: row });
      },
      // 删除
      async handleDel(row) {
        this.$confirm("确定删除????????", {
          confirmButtonText: "确定",
           cancelButtonText: "取消",
          type: "danger"
        })

        .then(resp => {
          // console.log("++++++++++++++++++++++++++++++++++++++++++++++++++")
          // console.log(resp)
          if (resp=="confirm") {
            // console.log("--------------------------------------------------------")
            // console.log(resp)
            var serviceOrderId = row.serviceOrderId;
            var resp = delServiceOrder(serviceOrderId).then(res => {
              if (res.data) {
                console.log("删除成功............");
                this.reload();
                // this.$router.push({ name: "ServiceOrder" });
              } else {
                console.log("删除失败............");
              }
            });
          }
        })
        .catch(err => err);
      },
      // 查询
      async handleQuery(){
        this.$router.push({
            query:{
            page:1
            }
        });
        // console.log("测试输入查询")
        // console.log(this.inputQuery)
        var serviceOrderQuery = this.inputQuery
        var resp = await queryServiceOrder(this.page,this.limit,serviceOrderQuery)
        this.serviceOrderList = resp.data.list 
        this.total = resp.data.total;    
        },
        handleChangePage(newPage) {
        this.$router.push({
            // name: "ServiceOrder",
            query: {
            page: newPage,
            },
        });
        this.pageServiceOrderList();
        },
        async pageServiceOrderList() {
            var serviceOrderQuery = this.inputQuery
            var resp = await queryServiceOrder(this.page,this.limit,serviceOrderQuery)
            this.serviceOrderList = resp.data.list 
            this.total = resp.data.total;
            // console.log(resp);
            // console.log("测试this.total")
            // console.log(this.total);
        },
    },

}
</script>

<style>

</style>